<template>
	<!-- 店家端 剧本商城  -->
	<item-Box padding="24">
		<view :class="[{'u-flex':isImage},customClassName]" class="position-relative list-item u-col-top">
			<view class="right-col u-flex u-flex-wrap u-row-between  u-flex-1">
				<view class="u-padding-top-23 u-padding-bottom-23" style="width: 100%;">
					<!-- 价格 -->
					<view class="u-margin-bottom-20 text-color-765CFE">
						<price :item="data" :size="36" :showTxt="false"></price>
					</view>
					<!-- 剧本名 和 分享-->
					<view class="u-flex u-row-between" @click.stop>
						<view class="box-title  text-bold u-font-36 item-name u-flex-1">
							{{data.name || data.productName || data.title || data.nickname || ''}}
						</view>
						<view class="share u-position-relative">
							<u-icon name="zhuanfa" size="28" custom-prefix="custom-icon" color="#765CFE"></u-icon>
							<button open-type="share" class="open-share u-position-absolute"></button>
						</view>
					</view>
					<!-- 评分 和评论 -->
					<view :class="'u-padding-top-'+padding" class="u-flex">
						<star :score="score"></star>
						<text
							class="u-font-20 reply-color u-margin-left-34">{{data.evaluateNum || data.storeCommentCount ||0}}条</text>
					</view>
					<!-- 标签 -->
					<view :class="'u-padding-top-'+padding" v-if="isTag&&tags.length" class="u-flex u-flex-wrap">
						<view class="u-margin-right-10 u-margin-bottom-10 " v-for="(c,i) in tags" :key="i">
							<u-tag :text="c" size="mini" shape="circle" bg-color="#EFEFEF" border-color="#EFEFEF"
								color="#B2B2B2" />
						</view>
					</view>
				</view>
				<!-- 简介 -->
				<slot name="content">
					<text v-if="!ranking" class="desc u-font-24 content-desc-item ">
						{{data.info || data.desc || ''}}
					</text>
				</slot>
				<!-- 销量库存等 -->
				<view class="u-flex u-font-24 content-sale u-row-between u-flex-1">
					<view>
						销量：{{data.sales || 0}}
					</view>
					<view>
						库存：{{data.stock || 0}}
					</view>
					<view>
						{{data.releaseTime | releaseTimeTxt}}发布时间：{{data.releaseTime | dayFormat}}
					</view>
				</view>
				<view class="u-position-relative" :class="'u-padding-top-'+padding" style="width: 100%;">
					<slot name="footer-start"></slot>
					<slot name="footer">
						<!-- 发行信息 -->
						<view class="u-flex" v-if="user">
							<view class="u-flex u-flex-1" @click.stop="issueClick(data)">
								<view class="u-flex-1 u-flex">
									<item-image type="1" :img="data.avatar" :size="42" :fade="false" />
									<text
										class="text-bold u-font-28 content-desc-item u-margin-left-8 u-line-1 username-text">{{data.createName || '' }}</text>
								</view>
								<slot name="avatarRight"></slot>
							</view>
							<!-- 浏览量和 点赞数 -->
							<view class="u-flex" v-if="showFooterRight">
								<view class="u-flex u-margin-right-14 text-tips">
									<!-- <u-image src="/static/images/read.png" width="32" height="32" :lazy-load="false"
										:show-loading="false" :fade="false"></u-image> -->
									<u-icon  name="chakan" size="40" custom-prefix="index-custom-icon"></u-icon>
									<text class="u-font-20 u-margin-left-10">{{data.browse || 0}}</text>
								</view>
								<view class="u-flex" v-if="showFooterRightStar" @click.stop="unlike">
									<u-icon :name="data.isLike===0?'weidianzan':'dianzan1'" size="32"
										:color="data.isLike===0?'#999999':'#FF8DC3'" custom-prefix="custom-icon">
									</u-icon>
									<text class="u-font-20 u-margin-left-10">{{likeNum || 0}}</text>
								</view>
							</view>
						</view>
					</slot>
				</view>
			</view>
		</view>
		<slot name="end"></slot>
		<model v-model="modelFlag" :show-title="false" show-cancel-button  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			@confirm="removeItemLarp" :content="removeItemTxt" />
		<model v-model="likeFlag" :show-title="false" show-cancel-button  cancel-color="#333333" :confirm-color="currentThemeObj.primary"
			@confirm="setcollection" content="是否取消点赞？" />
	</item-box>
</template>

<script>
	import {
		customRequest,
		deleteIds
	} from '@/api/crud.js'
	import model from '@/components/u-modal/u-modal.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			model
		},
		props: {
			itemTypeTxt: {
				type: String,
				default: '剧本'
			},
			item: {
				type: Object,
				default: () => ({})
			},
			isTag: {
				type: Boolean,
				default: true
			},
			ranking: {
				type: Boolean,
				default: false
			},
			user: {
				type: Boolean,
				default: true
			},
			isImage: {
				type: Boolean,
				default: true
			},
			showStar: {
				type: Boolean,
				default: true
			},
			isShare: {
				type: Boolean,
				default: true
			},
			index: {
				type: [Number, Boolean],
				default: false
			},
			itemNameStyle: {
				type: Object,
				default: () => ({})
			},
			isList: {
				type: Boolean,
				default: true
			},
			showFooterRight: {
				type: Boolean,
				default: true
			},
			showFooterRightStar: {
				type: Boolean,
				default: true
			},
			showDelete: {
				type: Boolean,
				default: false
			},
			showTop: {
				type: Boolean,
				default: false
			},
			showEdit: {
				type: Boolean,
				default: false
			},
			showTime: {
				type: Boolean,
				default: true
			},
			padding: {
				type: [Number,String],
				default: 14
			},
			starSize: {
				type: Number,
				default: 20
			},
			height: {
				type: [Number, String],
				default: 346
			},
			width: {
				type: [Number, String],
				default: 214
			},
			renderType: {
				type: String,
				default: ''
			},
			productIdStr: {
				type: String,
				default: 'id'
			},
			collectionType: {
				type: String,
				default: 'exhibitCollection' //是否为商品
			},
			showHotelAddress: {
				type: Boolean,
				default: false
			},
			customClassName: {
				type: String,
				default: ''
			}
		},
		computed: {
			removeItemTxt() {
				return `是否删除该${this.itemTypeTxt}?`
			},
			tags() {
				const str = this.data.categoryDescription || this.data.storeType
				return str && str.split(',') || []
			},
			likeNum() {
				return this.data.likeNum;
			},
			productId() {
				return this.data[this.productIdStr]
			},
			image() {
				const data = this.data;
				if (!data) return '';
				const img = data.image || data.productImage || data.img;
				return img
			},
			score() {
				return this.data.difficultyLevel || this.data.storeScore || 5
			},
			tagColor() {
				return this.isCity ? '#765CFE' : '#ED492E'
			}
		},
		watch: {
			item: {
				handler() {
					this.data = this.item;
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				modelFlag: false,
				apiType: 'product',
				apiModule: 'shopApi',
				likeFlag: false,
				data: {}
			}
		},
		methods: {
			removeItem() {
				this.modelFlag = true;
			},
			//删除剧本
			removeItemLarp() {
				this.$emit('remove', this.productId)
			},
			//编辑剧本
			editItem(item) {
				this.$emit('edit', this.productId)
			},
			//点赞
			setcollection() {
				if (!this.$store.getters.loginForm.uid) {
					this.$u.toast('您还没有登录')
					return false;
				}
				const isLike = this.setLikeFlag()
				this.$u.toast((!isLike ? '取消' : '') + '点赞成功') //先操作数据再查看是否成功 如果成功就不管了 如果不成功就恢复原数据
				const obj = {
					productId: this.data.productId,
					uid: this.$store.getters.loginForm.uid,
					type: 'like',
					collectNum: 1,
					category: 0
				}
				switch (this.collectionType) {
					case 'mallCollection': //商城点赞
						obj.mallProductId = this.data.id
						break;
					case 'exhibitCollection': //展会点赞
						obj.exhibitProductId = this.data.id
						break;
					case 'collection':
						obj.productId = this.data.id
						break;
					case 'experienceCollection'://体验商城点赞
						obj.experienceProductId = this.data.id
						break;
				}
				customRequest(obj, 'storeProductRelation', this.apiModule, this.collectionType, 'post').catch(this
					.setLikeFlag)
			},
			setLikeFlag() {
				const isLike = this.data.isLike == 1 ? 0 : 1;
				this.$set(this.data, 'isLike', isLike)
				const num = isLike == 1 ? ++this.data.likeNum : --this.data.likeNum;
				this.$set(this.data, 'likeNum', num)
				return isLike
			},
			unlike() {
				//如果身份是发行，并且该剧本是自己的，不能点赞。
				if(this.loginForm.userType=='issue' && this.loginForm.uid==this.data.uid){
					return false;
				}
				const likeFlag = this.data.isLike === 1;
				if (this.renderType === 'list' && likeFlag) {
					this.$emit("unLike", this.productId);
					return false;
				} //首页
				this.likeFlag = likeFlag;
				if (!this.likeFlag) this.setcollection()
			},
			getShare(item) {
				this.$u.mpShare = {
					title: item.name,
					imageUrl: this.imgFilter(item.image)
				}
				this.$emit('getShare')
			},
			//设置置顶
			setTop() {
				this.$emit('setTop', this.data)
			},
			//点击发行名字
			issueClick(data) {
				this.$emit('issueClick', data)
			}
		},
		filters: {
			releaseTimeTxt(value) {
				// 判断当前时间是不是今天之前
				if (value) {
					return dayjs(value).isAfter(dayjs()) ? '预计' : ''
				}
				return '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.desc{
		margin-top: 10rpx;
		width: 100%;
	}
	.list-item {
		line-height: 1;
	}

	.username-text {
		width: 25vw;
	}

	.right-col {
		padding-left: 26rpx;
		padding-right: 6rpx;
		flex-shrink: 0;
		box-sizing: border-box;
	}

	.position-relative {
		position: relative;
	}

	.the-top {
		position: absolute;
		left: 10rpx;
		top: 0;
		z-index: 55;

		&-txt {
			position: absolute;
			left: 33rpx;
			top: 23rpx;
			font-size: 28rpx;
			z-index: 56;
			color: #FCFBFA;
			transform: translate(-50%, -50%);
		}
	}

	.item-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		flex-shrink: 0;
		width: 0;
		padding-right: 10px;
	}

	.share {
		.open-share {
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}

	.address {
		line-height: 34rpx;
		font-size: 24rpx;
	}

	.reply-color {
		color: #666;
	}
	.content-sale{
		color:var(--reversal-color);
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}
</style>
